<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 1 箭头函数和普通函数的区别
        //    this指向不一样，箭头函数没有arguments ，简写， 箭头函数只能写匿名函数

        // 2 阻止事件冒泡   e.stopPropagation()   e.cancelBubble = true

        // 3 事件委托：利于事件冒泡，把子元素的同类型事件绑定在父元素身上，通过事件对象(e.target)去绑定事件

        // 4 数组的迭代方法   forEach   map   filter  some   every

        // 5 数组的归并方法  reduce !!!!!!!!!!!

        // 6 数组的深复制  

        const deepCopy = arr => {
            const arr2 = [];
            // 判断原数组中的值是否为数组
            arr.forEach(v => {
                if (Array.isArray(v)) {
                    const arr3 = deepCopy(v);
                    arr2.push(arr3);
                } else {
                    arr2.push(v);
                }
            })

            return arr2
        }


        // 展开只能实现一维数组的深复制
        // const arr = [1, [2, 3], 4];

        // const arr2 = [...arr];

        // arr2[1].push(5);

        // console.log(arr2);

        // console.log(arr);


        // 多维数组的深复制
        
        const arr = [1, [2, 3], 4];

        const json = JSON.stringify(arr);

        const arr2 = JSON.parse(json);

        console.log(arr2);

        arr2[1].push(5);

        console.log(arr2);

        console.log(arr);



    </script>

</body>

</html>